<template>
  <div class="container">
    <el-input
        type="textarea"
        class="textarea left custom-input"
        :row="row"
        v-model="leftText"
    />
    <el-input
        type="textarea"
        class="textarea right custom-input"
        :row="row"
        v-model="rightText"
    />
  </div>
  <el-footer>
    <el-button @click="parseLog2SqlV2" type="primary">
      转换
    </el-button>
    <el-button @click="copy" type="primary">
      复制
    </el-button>
  </el-footer>
</template>
<script>
import {copy2Clipboard} from "../../utils/util.js";
import {beautifySQL} from "../../utils/sqlParser.js";

export default {
  name: 'MybatisLogFormatter',
  data() {
    return {
      row: 10,
      leftText: '',
      rightText: '',
      sql: '',
      paramArr: []
    }
  },
  methods: {
    copy() {
      copy2Clipboard(this)
    },
    parseLog2SqlV2() {
      if (this.leftText.includes("Preparing:")) {
        const strArr = this.leftText
            .replaceAll("==>", "")
            .split("Parameters:");
        const params = strArr[1];
        const containsSqlStr = strArr[0]
        const sqlArr = containsSqlStr.split("Preparing:")
        this.sql = sqlArr[sqlArr.length - 1]
        this.paramArr = params.split(",")
        while (this.sql.includes('?')) {
          this.paramArr.forEach(item => {
            let afterStr = item.substring(0, item.indexOf('('))
            if (item.includes("(LocalDateTime)") ||
                item.includes("(Date)") ||
                item.includes("(LocalTime)") ||
                item.includes("(LocalDate)") ||
                item.includes("(Timestamp)") ||
                item.includes("(String)")
            ) {
              afterStr = `'${afterStr}'`
            }
            this.sql = this.sql.replace('?', afterStr)
            console.log(this.sql)
          })
        }
        this.rightText = beautifySQL(this.sql)
      } else {
        this.$message.error('请填写包含Preparing:完整MybatisLog')
      }
    }
  }
}
</script>
<style></style>
